<html>
<head>
<meta name="description" content="tab切换 jQuery" />
  <meta charset="utf-8">
  <title>tab 切换</title>
  <style>
    /*转换Class,当点击哪一个拥有相应的class,其他的删除对应class*/
    *{
      margin: 0;
      padding: 0;
      box-sizing:border-box;
    }
    ul,li{
      list-style: none;
    }
    .tab-ct{
      width: 318px;
      margin: 20px auto;
    }
    .tab-ct .header::after{
      content: '';
      display: block;
      clear: both;
    }
    .tab-ct .header>li{
      float: left;
      text-align: center;
      width: 100px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #ccc;
      border-right: none;
    }
    .tab-ct .header>li.active{
      background: #ccc;
    }
    .tab-ct .header>li:last-child{
      border-right: 1px solid #ccc; 
    }
    .tab-ct .content>li{
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      border-top: none;
      padding: 10px;
      display: none;
    }

    .tab-ct .content>li.active{
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-ct">
    <ul class="header">
      <li class="active">tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>

    <ul class="content">
      <li class="active">内容一</li>
      <li>内容二</li>
      <li>内容三</li>
    </ul>
  </div>

   <div class="tab-ct">
    <ul class="header">
      <li class="active">tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>

    <ul class="content">
      <li class="active">内容一</li>
      <li>内容二</li>
      <li>内容三</li>
    </ul>
  </div>

 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 <script>
   $('.tab-ct .header>li').on('click',function(){
    var $this = $(this)
    //获取这个元素下标
    var index = $this.index()
    //这个元素增加class==active,兄弟删除class 
    $this.addClass("active").siblings().removeClass("active")
    //内容相对应的元素
    $this.parents(".tab-ct")
         .find(".content>li").eq(index).addClass("active").siblings().removeClass("active")
   })

 </script>
</body>
</html>